<template>
  <div>
    <com-Title
      :formList="info.formList"
      :color="info.color"
      :styleIng="{margin:'10px 0px 10px 10px'}"
    >
      <span slot="title">{{info.title}}</span>
    </com-Title>
    <com-Title :isShow="false" :color="shop.color" :styleIng="{margin:'10px 0px 10px 10px'}">
      <span slot="title">{{shop.title}}</span>
      <avue-crud :data="data" :option="option" slot="table"></avue-crud>
    </com-Title>
    <com-Title
      :formList="collection.formList"
      :color="info.color"
      :styleIng="{margin:'10px 0px 10px 10px'}"
    >
      <span slot="title">{{collection.title}}</span>
    </com-Title>
  </div>
</template>

<script>
import comTitle from "@/views/com/com_title.vue";
export default {
  components: {
    comTitle,
  },
  props: {
    orderDetailsInfo: {
      type: Object,
    },
  },
  data() {
    return {
      info: {
        title: "基本信息",
        color: "#000",
        gutter: 0,
        formList: [
          {
            label: "订单编号：",
            value: this.orderDetailsInfo.payOrderNo,
            smSpan: 7,
            smOffset: 0,
          },
          {
            label: "创建时间：",
            value: this.orderDetailsInfo.payOrderNo,
            smSpan: 7,
            smOffset: 0,
          },
          {
            label: "操作人：",
            value: this.orderDetailsInfo.operatorId,
            smSpan: 7,
            smOffset: 0,
          },
          {
            label: "订单来源：",
            value: this.orderDetailsInfo.orderSource,
            smSpan: 7,
            smOffset: 0,
          },
          {
            label: "门店：",
            value: this.orderDetailsInfo.shopName,
            smSpan: 7,
            smOffset: 0,
          },
          {
            label: "收银员：",
            value: this.orderDetailsInfo.operatorId,
            smSpan: 7,
            smOffset: 0,
          },
          {
            label: "订单备注：",
            value: this.orderDetailsInfo.body,
            smSpan: 7,
            smOffset: 0,
          },
        ],
      },
      shop: {
        title: "商品信息",
        color: "#000",
        gutter: 0,
      },
      collection: {
        title: "小计与收款：",
        color: "#000",
        gutter: 0,
        formList: [
          {
            label: "商品数量：",
            value: this.orderDetailsInfo.payGoodsNum,
            smSpan: 24,
            smOffset: 0,
          },
          {
            label: "花费积分：",
            value: this.orderDetailsInfo.subPayAmt,
            smSpan: 24,
            smOffset: 0,
          },
        ],
      },
      data: [
        {
          name: "张三",
          sex: "男",
        },
        {
          name: "李四",
          sex: "女",
        },
      ],
      option: {
        index: true,
        indexLabel: "序号",
        page: false,
        align: "center",
        menu: false,
        header: false,
        menuAlign: "center",
        column: [
          {
            label: "商品名称",
            prop: "name",
          },
          {
            label: "商品规格",
            prop: "sex",
          },
          {
            label: "所需积分（个）",
            prop: "name",
          },
          {
            label: "兑换数量",
            prop: "sex",
          },
          {
            label: "商品小计（个）",
            prop: "name",
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>